<template>
  <ekDialog
    v-model="ekVisiable"
    :title="title"
    @submit="handleSubmit"
    :hideBtn="disabled"
  >
    <div class="ek-form" v-loading="loading">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="third">
          <el-form label-width="160px" :disabled="true" v-if="!loading">
            <el-form-item prop="transfer_price" label="订单金额">
              <ekInput v-model="baseData.transfer_price" />
            </el-form-item>
            <el-form-item prop="transfer_no" label="订单编号">
              <ekInput v-model="baseData.transfer_no" />
            </el-form-item>
            <el-form-item prop="transfer_outbound_no" label="出库单单号">
              <ekInput v-model="baseData.transfer_outbound_no" />
            </el-form-item>
            <el-form-item prop="transfer_outbound_time" label="出库时间">
              <ekInput v-model="baseData.transfer_outbound_time" />
            </el-form-item>
            <el-form-item
              prop="transfer_outbound_personnel_name"
              label="出库人员"
            >
              <ekInput v-model="baseData.transfer_outbound_personnel_name" />
            </el-form-item>
            <el-form-item prop="transfer_state" label="订单状态">
              <ekRadio
                v-model="baseData.transfer_state"
                :options="transferStateOptions"
              />
            </el-form-item>
            <el-form-item prop="pay_state" label="支付状态">
              <ekRadio
                v-model="baseData.pay_state"
                :options="payStateOptions"
              />
            </el-form-item>
            <el-form-item prop="transfer_mode" label="运输方式">
              <ekRadio
                v-model="baseData.transfer_mode"
                :options="modeOptions"
              />
            </el-form-item>
            <el-form-item prop="quotation_min" label="最低消费">
              <ekInput v-model="form.quotation_min" />
            </el-form-item>
            <el-form-item prop="tatal_weight" label="计费重量">
              <ekInput
                v-model="costData.tatal_weight"
       
              />
            </el-form-item>
            <el-form-item prop="total_cubic" label="计费体积">
              <ekInput
                v-model="costData.total_cubic"
       
              />
            </el-form-item>
            <el-form-item prop="total_piece" label="计费件数">
              <ekInput
                v-model="costData.total_piece"
       
              />
            </el-form-item>
             <el-form-item prop="total_piece" label="计费公式">
                
            </el-form-item>
          </el-form>
          <div>
            <el-table
              :data="costData.order_list"
              border
              class="table-box"
              v-if="!loading"
            >
              <el-table-column prop="charging" label="计费方式">
                <template v-slot="scope">
                  {{ charging[scope.row.charging] }}
                </template>
              </el-table-column>

              <el-table-column prop="cost_cubic" label="体积">
                <template v-slot="scope">
                  {{
                    scope.row.charging == "volume"
                      ? scope.row.cost_cubic
                      : "不计费"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="cost_weight" label="重量">
                <template v-slot="scope">
                  {{
                    scope.row.charging == "weight"
                      ? scope.row.cost_weight
                      : "不计费"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="quotation_piece" label="件数">
                <template v-slot="scope">
                  {{
                    scope.row.charging == "piece"
                      ? scope.row.quotation_piece
                      : "不计费"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="price" label="单价"></el-table-column>
            </el-table>
          </div>

        </el-tab-pane>
        <el-tab-pane label="计费方案" name="first">
          <el-form
            :model="form"
            :rules="rules"
            label-width="160px"
            ref="forms"
            :disabled="disabled"
            v-if="!loading"
          >
            <el-form-item prop="quotation_name" label="方案名称">
              <ekInput v-model="form.quotation_name" />
            </el-form-item>
            <el-form-item prop="quotation_throwing_weight" label="抛重系数">
              <ekInput v-model="form.quotation_throwing_weight" />
            </el-form-item>
            <el-form-item prop="quotation_min" label="最低消费">
              <ekInput v-model="form.quotation_min" />
            </el-form-item>
            <el-form-item prop="quotation_proportion" label="比重比率">
              <ekInput v-model="form.quotation_proportion" />
            </el-form-item>
            <el-form-item prop="quotation_weight_price" label="首重价格">
              <ekInput v-model="form.quotation_weight_price" />
            </el-form-item>

            <el-form-item prop="quotation_plan" label="计费方案">
              <ekRadio
                v-model="form.quotation_plan"
                :options="quotationOptions"
              />
            </el-form-item>

            <el-form-item
              prop="quotation_plan_ratio"
              label="计费系数"
              v-if="form.quotation_plan == 2"
            >
              <ekInput v-model="form.quotation_plan_ratio" />
            </el-form-item>
            <el-form-item prop="quotation_transport" label="运输方式">
              <ekCheckbox
                v-model="form.quotation_transport"
                :options="modeOptions"
              />
            </el-form-item>
            <el-form-item prop="quotation_type" label="货品类型">
              <ekCheckbox
                v-model="form.quotation_type"
                :options="typeOptions"
              />
            </el-form-item>
            <el-form-item prop="quotation_price" label="计费组合">
              <el-table :data="form.quotation_price" border class="table-box">
                <el-table-column prop="transport_mode" label="运输方式">
                  <template v-slot="scope">
                    {{ getModeName(scope.row.transport_mode) }}
                  </template>
                </el-table-column>
                <el-table-column prop="transport_type" label="运输类型">
                  <template v-slot="scope">
                    {{ getTypeName(scope.row.transport_type) }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="transport_first_price" label="首重价格">
                <template v-slot="scope">
                  <el-input
                    v-model.number="scope.row.transport_first_price"
                    placeholder="输入首重价格"
                  ></el-input>
                </template>
              </el-table-column> -->
                <el-table-column prop="transport_price" label="续重价格">
                  <template v-slot="scope">
                    <el-input
                      v-model.number="scope.row.transport_price"
                      placeholder="输入价格"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="transport_cube_price" label="立方价格">
                  <template v-slot="scope">
                    <el-input
                      v-model.number="scope.row.transport_cube_price"
                      placeholder="输入价格"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="transport_piece_price" label="按件价格">
                  <template v-slot="scope">
                    <el-input
                      v-model.number="scope.row.transport_piece_price"
                      placeholder="输入价格"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="收货信息" name="second">
          <el-form label-width="160px" :disabled="true" v-if="!loading">
            <el-form-item prop="address_name" label="收货人姓名">
              <ekInput v-model="addressData.address_name" />
            </el-form-item>
            <el-form-item prop="address_phone" label="收货人手机">
              <ekInput v-model="addressData.address_phone" />
            </el-form-item>
            <el-form-item prop="address_country" label="收货地区">
              <ekInput v-model="addressData.address_country" />
            </el-form-item>
            <el-form-item prop="address_code" label="收货邮编">
              <ekInput v-model="addressData.address_code" />
            </el-form-item>

            <el-form-item prop="address_detail" label="收货地址">
              <ekTextarea v-model="addressData.address_detail" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="国内订单信息" name="fourth">
          <div>
            <el-table
              :data="orderList"
              border
              class="table-box"
              v-if="!loading"
            >
              <el-table-column prop="order_no" label="订单号"></el-table-column>
              <el-table-column
                prop="order_logistic_no"
                label="物流单号"
              ></el-table-column>
              <el-table-column prop="order_transport_type" label="货品类型">
                <template v-slot="scope">
                  {{ getTypeName(scope.row.order_transport_type) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="order_good_length"
                label="货品长"
              ></el-table-column>
              <el-table-column
                prop="order_good_width"
                label="货品宽"
              ></el-table-column>
              <el-table-column
                prop="order_good_height"
                label="货品高"
              ></el-table-column>
              <el-table-column
                prop="order_good_weight"
                label="货品重量"
              ></el-table-column>

              <el-table-column prop="order_creater" label="入库员">
                <template v-slot="scope">
                  {{ scope.row.user_nick }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </ekDialog>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekTextarea from "@/components/form/ekTextarea/index.vue";
import ekCheckbox from "@/components/form/ekCheckbox/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import { objectAssignment } from "@/utils/common.js";
import { getDimensionByCode } from "@/utils/sys.js";
const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowId: {
    type: [String, Number],
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage } = globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});

function handleSubmit(done) {
  let url = props.rowId ? apis.edit : apis.add;
  forms.value.validate((valid) => {
    if (valid) {
      $http
        .request({
          url: url,
          method: props.rowId ? "PUT" : "POST",
          data: {
            ...form.value,
          },
        })
        .then((res) => {
          $ekMessage.success(res.message);
          emit("submit", done);
        })
        .catch((err) => {});
    }
  });
}
const charging = { volume: "按体积", weight: "按重量", piece: "按件数" };
const loading = ref(false);
let forms = ref(null);
let form = ref(null);
const activeName = ref("third");
const initForm = () => {
  form.value = {
    quotation_name: "",
    quotation_throwing_weight: "",
    quotation_proportion: "",
    quotation_min: "",
    quotation_transport: [],
    quotation_type: [],
    quotation_price: [],
    quotation_plan: "",
    quotation_plan_ratio: "",
    quotation_weight_price: "",
    id: props.rowId,
  };
};
let rules = reactive({
  quotation_name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  quotation_plan: [
    { required: true, message: "请输入计费方案", trigger: "blur" },
  ],
  quotation_transport: [
    { required: true, message: "请选择运输方式", trigger: "blur" },
  ],
  quotation_type: [
    { required: true, message: "请选择货品类型", trigger: "blur" },
  ],
});
const detail = ref({});
const baseData = ref({});
const orderList = ref([]);
const addressData = ref([]);
const modeOptions = ref([]);
const typeOptions = ref([]);
const costData = ref({});
const getModeName = (mode) => {
  return modeOptions.value.find((item) => {
    return item.value == mode;
  }).label;
};
const getTypeName = (type) => {
  return typeOptions.value.find((item) => {
    return item.value == type;
  }).label;
};
const handleClick = (name) => {
  activeName.value = name;
};
// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  $http
    .get(apis.detail, {
      params: {
        id: props.rowId || null,
      },
    })
    .then((res) => {
      if (Object.keys(res.data).length) {
        form.value = {
          ...res.data.quotation,
        };
        modeOptions.value = res.data.mode;
        typeOptions.value = res.data.type;
        addressData.value = res.data.address_data;
        baseData.value = res.data.base_data;
        orderList.value = res.data.order_list;
        costData.value = res.data.cost;
        objectAssignment(form.value, res.data);
      }
      loading.value = false;
    });
}
const quotationOptions = ref([]);
const transferStateOptions = ref([]);
const payStateOptions = ref([]);
watch(
  () => props.visiable,
  (val) => {
    if (val) {
      initForm();
      init();
    }
  }
);
onMounted(async () => {
  quotationOptions.value = await getDimensionByCode("DIM_QUOTATION_STATE");
  transferStateOptions.value = await getDimensionByCode("DIM_ORDER_STATE");
  payStateOptions.value = await getDimensionByCode("DIM_TRANSFER_PAY_STATE");
});
</script>

<style scoped lang="scss"></style>
